<template>
	<view class="inspection-index">
	    <view class="inspection-index-head-img">
	      <image fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
	    </view>
	    <view class="inspection-index-from">
	      <view class="inspection-index-from-content">
	        <view class="inspection-index-from-content-top">
	          <van-row>
	            <van-col span="8">
	              <view style="padding: 0.5rem; border-right: #ebedf0 solid 0.1rem" align="left">
	                <view style="font-size: 24rpx;text-align: center;">好评率</view>
	                <view style="color: orange;font-size: 1.5rem;text-align: center;">99.7%</view>
	              </view>
	            </van-col>
	            <van-col span="8">
	              <view style="padding: 0.5rem;" align="left">
	                <view style="font-size: 24rpx;text-align: center;">服务人数</view>
	                <view style="font-size: 1rem;text-align: center;line-height: 80rpx;">888999</view>
	              </view>
	            </van-col>
	            <van-col span="8">
	              <view style="padding: 0.5rem;" align="left">
	                <view style="font-size: 24rpx;text-align: center;">排查隐患项</view>
	                <view style="font-size: 1rem;text-align: center;line-height: 80rpx;">888999</view>
	              </view>
	            </van-col>
	          </van-row>
	
	          <van-row>
	            <van-col>
	              <view class="bottom-btn" @click="payOrder" style="margin-left: 40rpx;">立即购买</view>
	            </van-col>
	          </van-row>
	
	        </view>
	        <view class="inspection-index-from-content-bottom">
	          <!-- 输入手机号，调起手机号键盘 -->
	          <van-form ref="formzero" :model="formzero" >
	            <van-field  v-model="formzero.zeroPhone" :rules="[{ required: true, message: '请填写手机号' }]" placeholder="请输入11位手机号" type="tel"/>
	            <van-field v-model="formzero.zeroAdder" :rules="[{ required: true, message: '请填写地址' }]" placeholder="请输入详细地址" />
	            <van-checkbox v-model="checked" style="font-size: 0.8rem" icon-size="0.8rem">我已阅读并同意《服务须知》</van-checkbox>
				<view class="btn" style="width: 400rpx;height: 80rpx;border-radius: 40rpx;background-color: #c39b73;">
					<text style="line-height: 80rpx;margin-left: 50rpx;">“零”元申请质检服务</text>
				</view>
	            <!--style="width: 10rem;height: 1.5rem"-->
	          </van-form>
	
	
	          <van-popup v-model="show" style="width: 18rem;height: 14rem">
	
	            <van-form ref="form" :model="form" >
	              <van-field
	                v-model="form.ownerName"
	                name="用户名"
	                label="用户名"
	                placeholder="用户名"
	              />
	
	              <!--<van-field>-->
	
	              <!--</van-field>-->
	
	              <van-field name="rate" label="评分">
	                <template #input>
	                  <van-rate v-model="form.ownerXing" />
	                </template>
	              </van-field>
	
	              <van-field
	                v-model="form.ownerParticulars"
	                name="详情"
	                rows="2"
	                autosize
	                label="详情"
	                type="textarea"
	                maxlength="50"
	                placeholder="详情"
	              />
	
	              <view style="margin: 16px;">
	                <van-button round block type="info" @click="submitForm">提交</van-button>
	              </view>
	            </van-form>
	
	          </van-popup>
	
	          <van-popup @click="assa" v-model="showOne" style="border-radius: 30px;width: 10rem;height: 2.5rem;background-color: aquamarine">
	            <view>一键拨号询问<a :href="'tel:' + phone" rel="external nofollow" >{{phone}}</a></view>
	            <meta name="format-detection" content="telephone=yes" />
	          </van-popup>
	        </view>
	      </view>
	    </view>
	    <view class="kongbai"></view>
	    <view class="inspection-index-content">
	      <view class="inspection-index-content-evaluate">
	        <view class="inspection-index-content-evaluate-top" align="left">
	          <view>业主评价 <text style="font-weight: normal;font-size: 0.7rem">  业主真实评价</text></view>
	        </view>
	        <view class="inspection-index-content-evaluate-bottom" align="left" style="padding-top: 0.5rem">
	          <van-swipe @change="onChange">	
	          <view v-for="item in indexList" :key="item.index">
	            <van-swipe-item>
	              <view class="inspection-index-content-evaluate-cont">
	                <image round  src="https://img.yzcdn.cn/vant/cat.jpeg" style="float: left;width: 40px; height: 40px;"/>
	                <view style="padding-left: 3rem">
	                  <view>{{item.ownerName}}</view>
	                  <view>{{item.ownerDate}}</view>
	                  <view><van-rate v-model="item.ownerXing" readonly size="0.8rem" /></view>
	                </view>
	                <view style="font-size: 0.8rem;padding-top: 0.3rem">
	                  <view style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
	                    {{item.ownerParticulars}}
	                </view></view>
	              </view>
	            </van-swipe-item>
	          </view>
	            <template #indicator>
	              <view class="custom-indicator"></view>
	            </template>
	          </van-swipe>
	        </view>
	      </view>
	      <view class="inspection-index-content-quality" style="padding: 0.5rem">
	        <view class="inspection-index-content-evaluate-top" align="left">
	          <view>专业质检 <text style="font-weight: normal;font-size: 0.7rem">  为业主轻松避坑</text></view>
	        </view>
	        <view class="inspection-index-content-evaluate-bottom" style="padding-top: 0.5rem">
	          <van-swipe @change="onChange">
	            <van-swipe-item>
	              <view class="inspection-index-content-evaluate-conts">
	                <!--<van-image width="100" height="100" src="@/assets/aaa.png" />-->
	                <img width="300" height="400" src="@/assets/aaa.png">
	              </view>
	              <!--<view class="inspection-index-content-evaluate-conts">-->
	
	              <!--</view>-->
	            </van-swipe-item>
	
	            <template #indicator>
	              <view class="custom-indicator"></view>
	            </template>
	          </van-swipe>
	        </view>
	      </view>
	      <view class="inspection-index-content-we" style="padding-bottom: 2rem">
	        <view class="inspection-index-content-we-top" align="left">
	          <view>关于我们 <text style="font-weight: normal;font-size: 0.7rem">  自营服务·安全保障</text></view>
	        </view>
	        <view style="padding-top: 0.5rem">
	          <image height="10rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
	        </view>
	      </view>
	    </view>
	  </view>
</template>

<script>
	  import { zeroadd,zeroList,zeroedit} from "@/api/customer/zeroyuan";
	  import { findAllList,getinfo,add,unifiedOrder } from "@/api/customer/evaluation";
	export default {
		data() {
			return {
				 orderNo:"zhangsan",
				          amount: 22.2,
				          body:'张胜男',
				
				          appid: 'wx05c8af6ffe91bc2b',
				          local:'sss',
				          teamStatusNUm:'2',
				          ceshi: '1',
				          phone: '18333151858',
				          indexList:[],
				          form:{},
				          formzero:{},
				          showOne: false,
				          show: false,
				          indexzero:[],
				          tel: '15533911111',
				          text: '石家庄',
				          checked: false,
				          current: 0,
				          value:5,
				
				
				          //必须配置项，从接口获取
				          appId:"",
				          timestamp:"",
				          noncstr:"",
				          signatureInfo:"",
				          // 自配项
				          imgurl:"",//分享图片（如分享出来链接上显示的小图标）
				          url:"",//分享地址（如分享出来一个链接，点链接要跳的页面地址）
			}
		},
		created() {
		        this.getList();
		        this.getzeroList();
		        this.showPopupAdd();
		
		        //指的是要做分享的页面的url送过去，请求成功才能拿到
		        let url = location.href.split('#')[0];
		        this.$axios({
		          url:'/use/shareurl',//请求微信分享的接口地址
		          method:'post',
		          data:url,
		        }).then(res=>{
		          if(res.data.success){
		          //这些配置参数必填项，后面去调微信的pai是需要传的。
		          this.appId = res.data.appId;
		          this.timestamp = res.data.timestamp;
		          this.noncstr = res.data.noncstr;
		          this.signatureInfo = res.data.signatureInfo;
		        }
		      }).catch(err=>{console.log(err)})
		      },
		methods: {
			 payOrder(){
			
			
			
			          unifiedOrder(this.orderNo,this.amount,this.body).then(res=>{
			
			          console.log("***res***"+JSON.stringify(res));
			          if (res.data.code === 0) {
			            // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=https://www.weixin.qq.com/wxpay/pay.php&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
			            // window.location.href = `http://localhost:8080/wxPay/unifiedOrder?orderSn=123456789&paymentMoney=1&productName=支付`
			            // this.payUrl = res.data.data.codeUrl
			            // window.location.href = this.payUrl + '&redirect_url='
			          } else {
			            alert('微信支付调起失败！');
			          }
			          }).catch((err) => {
			              console.log(err);
			          })
			
			        },
			
			
			
			        // onBridgeReady(params) {
			        //   var that = this
			        //   WeixinJSBridge.invoke(
			        //     'getBrandWCPayRequest', {
			        //       "appId": params.appId,  //公众号名称，由商户传入
			        //       "timeStamp": params.timeStamp, //支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
			        //       "nonceStr": params.nonceStr,  //支付签名随机串，不长于 32 位
			        //       "package": params.package,//统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
			        //       "signType": 'MD5',  //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
			        //       "paySign": params.sign, //支付签名
			        //     },
			        //     function (res) {
			        //       if (res.err_msg === "get_brand_wcpay_request:ok") {
			        //         alert('支付成功！');
			        //         that.$router.push({path: '/myOrder'})
			        //       } else if (res.err_msg === "get_brand_wcpay_request:fail") {
			        //         alert('支付失败！');
			        //       }
			        //     });
			        //
			        // },
			
			        // 调用拨号功能
			        callPhone (phone) {
			          window.location.href = 'tel://' + phone
			          this.show = true;
			          this.showOne = false;
			
			
			        },
			        getzeroList(){
			          zeroList().then(res=>{
			            this.indexzero = res.data;
			          })
			        },
			
			        getList(){
			          findAllList().then(res=>{
			            this.indexList = res.data;
			          })
			        },
			
			        submitForm(){
			              add(this.form).then(res=>{
			                Toast.success('评价成功');
			                this.show = false;
			                this.getList();
			            })
			        },
			
			        assa(){
			          this.showOne = false;
			          this.show = true;
			        },
			
			        showPopupAdd(){
			          zeroadd(this.formzero).then(res=>{
			            this.getList();
			            this.getzeroList();
			            // Toast.success('您申请零元质检服务成功,会在24小时内联系您。😀');
			        })
			        },
			
			        showPopup(){
			
			          if(this.indexzero[0].teamStatus == '1'){
			            Toast.success('您已申请,零元质检服务。😀');
			          }else if(this.indexzero[0].teamStatus == '0') {
			            this.show = true;
			          }else if (this.indexzero[0].teamStatus == '2') {
			            zeroedit(this.formzero).then(res=>{
			              Toast.success('您申请零元质检服务成功,会在24小时内联系您。😀');
			            this.getList();
			            this.getzeroList();
			            })
			          }
			
			
			        },
			
			        onChange(index) {
			          this.current = index;
			        },
		}
	}
</script>

<style scoped>
	.inspection-index-head-img image{
		width: 100%;
	}
	.inspection-index-head-img{
		display: flex;
	}
	.inspection-index-head-img image{
		margin: 0 auto;
	}
.demo-nav{
    position: relative;
    display: flex;
	
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56rpx;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .demo-nav__right{
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .inspection-index-from{
    padding: 1rem;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 5%;
  }
  .inspection-index-from .inspection-index-from-content{
	  width: 600rpx;
	  margin-top: -90rpx;
    border-radius: 0.5rem;
    -moz-box-shadow:0px 1px 8px #333333;
    -webkit-box-shadow:0px 1px 8px #333333;
    box-shadow:0px 1px 8px #333333;
    background-color: #fff;
  }

  .inspection-index-from-content-top{
    padding-top: 0.6rem;
  }
  .inspection-index-from-content-top p{
    font-size: 0.7rem;
    padding: 0.2rem;
  }
  .inspection-index-from-content-bottom{
    padding: 1rem;
  }
  .inspection-index-content{
    padding: 0 1rem;
  }
  .inspection-index-content p{
    font-size: 1rem;
    font-weight: bolder;
  }
  .inspection-index-content-evaluate-cont{
    padding: 1rem;
    border: #ebedf0 0.1rem solid;
    border-radius: 1rem;
  }
  .inspection-index-content-evaluate-cont p{
    font-size: 0.85rem;
    font-weight: normal;
  }
  .inspection-index-content-evaluate-conts{
    padding: 1rem;
    border: #ebedf0 0.1rem solid;
    border-radius: 1rem;
    display: inline-block;
    width: 88%;
  }
  .inspection-index-content-evaluate-conts p{
    font-size: 0.85rem;
    font-weight: normal;
  }
  .kongbai{
    height: 18rem;
  }
</style>
